<script setup>
import {ref} from "vue";
</script>

<template>
  <div class="main container">
    <!--    <button @click="changePage(Home)">切换到首页</button>-->
    <!--    <button @click="changePage(User)">切换到用户页</button>-->
    <!--    <component :is="selectPage"></component>-->
    <!--  active-class="active"  -->
    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
      <router-link to="/" active-class="active"
                   class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
        <span class="fs-4">Vue Router</span>
      </router-link>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <router-link to="/" class="nav-link " active-class="active">首页</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/user" class="nav-link">用户</router-link>
        </li>
        <!--        <li class="nav-item">-->
        <!--          <router-link to="/user" class="nav-link" custom v-slot="{navigate,isActive}">-->
        <!--            <button class="btn btn-secondary" :class="{'is-active':isActive && 'active'}" @click="navigate">用户</button>-->
        <!--          </router-link>-->
        <!--        </li>-->
      </ul>
    </header>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "Main"
}
</script>
<style scoped>
@import "bootstrap/dist/css/bootstrap.min.css";
</style>